<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn">
                <div @click="back">
                  <i class="el-icon-back"></i
                  ><span>{{ $t("postlist.post") }}</span>
                </div>
              </div>
            </div>
            <!-- 给子组件添加绑定key，触发子组件刷新 -->
            <PostDetailsComponents
              :key="Math.random() * 100"
              :postData="postData"
              @reloadCommentDataList="initData"
            />
            <!-- 回复内容 -->
            <UserCommentComponents
              :key="Math.random() * 10"
              :postData="postData"
              @reloadCommentDataList="initData"
            />
            <!-- 分割线 -->

            <!-- 回复列表 -->
            <!-- 有数据 -->
            <div class="infinite-list-panel" v-loading="loading">
              <div class="infinite-list">
                <div v-if="commentDataForm.postCommentsList.length > 0">
                  <div
                    v-for="item in commentDataForm.postCommentsList"
                    :key="item.post_id"
                  >
                    <CommentsListComponents
                      @reloadDataList="initData"
                      :postData="item"
                    />
                  </div>
                  <p class="addload" v-if="!noMore" @click="addCommentDataList">
                    {{ $t("postlist.clickaddmore") }}
                  </p>
                  <p class="nomore" v-if="noMore">
                    {{ $t("postlist.nomore") }}
                  </p>
                </div>
                <!-- 没有数据 -->
                <div v-else class="Nothing">
                  {{ $t("postlist.nonecomments") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <MainRight />
    </div>
  </main>
</template>
<script>
import UserCommentComponents from "@/components/UserCommentComponents.vue";
import CommentsListComponents from "@/components/CommentsListComponents.vue";
//MainRight
import MainRight from "@/components/MainRight.vue";
import PostDetailsComponents from "@/components/PostDetailsComponents.vue";

export default {
  name: "PostMainContent",
  components: {
    UserCommentComponents,
    CommentsListComponents,
    MainRight,
    PostDetailsComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      post_id: this.$route.params.id,
      postData: {},
      isDataLoaded: false, //数据是否加载完毕，给子组件添加绑定key，触发子组件刷新
      ReplyFormLoaded: 0,
      loading: true,
      commentDataForm: {
        pl_parent_id: this.$route.params.id ? this.$route.params.id : 0,
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        postCommentsList: [], //关注贴文列表
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.commentDataForm.currentPage >= this.commentDataForm.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },

  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getUserPostByPostId();
      this.addFWCounts();
      this.getCommentDataList();
    },
    back() {
      this.$router.go(-1);
    },
    //当前帖子的id为父id查询相关的回复列表
    async getCommentDataList() {
      const res = await this.$http.post(
        "getUserCommentDataMapper",
        this.commentDataForm
      );
      // console.log(res.data);
      if (res.state == 200) {
        this.commentDataForm.postCommentsList = res.data.data;
        this.commentDataForm.pageTotal = res.data.pageTotal;
        this.commentDataForm.loading = false;
        this.loading = false;
      } else {
        console.log(res.message);
      }
    },
    //累加评论列表
    async addCommentDataList() {
      const res = await this.$http.post(
        "getUserCommentDataMapper",
        this.commentDataForm
      );
      if (res.state == 200) {
        //存放数据的列表累加
        this.commentDataForm.postCommentsList =
          this.commentDataForm.postCommentsList.concat(res.data.data);
        this.commentDataForm.pageTotal = res.data.pageTotal;
        this.commentDataForm.loading = false;
      }
    },
    async getUserPostByPostId() {
      let res = await this.$http.post("getPostInfoByPostId", {
        post_id: this.post_id,
      });
      if (res.state == 200) {
        if (res.data == null) {
          this.$router.push("/404");
          return;
        }
        this.postData = res.data;
        //给子组件添加绑定key，触发子组件刷新
        this.isDataLoaded = true;
        this.ReplyFormLoaded = 1;
      } else {
        console.log(res.message);
      }
    },
    //增加访问数量
    async addFWCounts() {
      let res = await this.$http.post("addFWCounts", { post_id: this.post_id });
      if (res.state == 200) {
        console.log("");
      }
    },
    //格式化表情包显示结果
    replace_em(str) {
      str = str.replace(/\</g, "&lt;");

      str = str.replace(/\>/g, "&gt;");

      str = str.replace(/\n/g, "<br/>");

      str = str.replace(
        /\[2023_([0-9]*)\]/g,
        '<img src="/emot/2023_$1.png" border="0" />'
      );

      return str;
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件
    $route: "getUserPostByPostId",
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
}

.back_page {
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  cursor: pointer;
  display: flex;
}

.back_btn i.el-icon-back {
  font-size: 18px;
  margin-right: 20px;
  font-weight: 700;
}

.back_btn span {
  font-size: 18px;
  font-weight: 600;
}

/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.Nothing {
  display: flex;
  text-align: center;
  justify-content: center;
  padding: 20px 0;
  width: 100%;
  font-weight: 700;
  border-top: 1px solid rgb(239, 243, 244);
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 54px;
  }

  .left-content {
    width: 100%;
  }

  .post_opr span {
    padding: 0 5px;
  }

  .post_pic img {
    width: 100%;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
  <style>
/* 覆盖 element ui 样式 */
.el-tabs__item {
  font-size: 18px !important;
}

.el-tabs__item.is-active {
  font-weight: bold;
  color: #000000 !important;
}

.el-tabs__header {
  /* 黏性定位 */
  position: sticky !important;
  top: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 199;
}
</style>